<template>
    <div>

        <!--顶部swiper轮播图-->
        <van-swipe class="Dswiper" indicator-color="rgba(0, 0, 0, 0.65)"
                   :style="{height: scrWidth/BIratio + 'px'}">

            <van-swipe-item v-for="(item,index) in detailJson.BIs"
                            :key="index">
                <img class="DswiperItem"
                     :src="URL + '/products/' + detailJson.ID +'/BI/' + item" alt="">
            </van-swipe-item>

        </van-swipe>

        <!--    价格-->
        <div class="priceText">
            <p class="price">￥{{tagSelectedSinglePrice}}</p>
            <span class="orprice">原价￥{{tagSelectedOrSinglePrice}}</span>
        </div>

        <!--    标题-->
        <h1 class="title">&nbsp;&nbsp;&nbsp;&nbsp;{{detailJson.Name}}</h1>

        <!--    标签-->
        <div v-if="detailJson.tags">
            <div class="tag"
                 v-for="(item,index) in detailJson.tags" :key="index">
                <van-tag round v-if="index%4===0" type="primary">{{item}}</van-tag>
                <van-tag round v-if="index%4===1" type="success">{{item}}</van-tag>
                <van-tag round v-if="index%4===2" type="danger">{{item}}</van-tag>
                <van-tag round v-if="index%4===3" type="warning">{{item}}</van-tag>
            </div>
        </div>

        <!--    滚动通告栏-->
        <div class="noticeBar">
            <van-notice-bar
                    v-if="detailJson.tip"
                    left-icon="http://43.226.148.67:5000/icon/喇叭.png"
                    :text="detailJson.tip"
            />
        </div>

        <!--    选择商品-->
        <van-cell title="请选择" value="请选择商品类型和数量"
                  v-bind:center="true" :clickable="false" arrow-direction="down"/>
        <div class="select">
            <div class="selected">
                <p class="selText">已选</p>
                <p class="selectedInfo">
                    {{tagSelectedName}}
                </p>
            </div>


            <div class="product">
                <p class="selText chanpin">产品</p>
                <div class="proType">
                    <div v-for="(item,index) in detailJson.TypeandPrice"
                         :key="index"
                         @click="tagSelect(index)"
                         class="proTag"
                         :class="{'proTagSelected':tagSelected == index}"
                    >
                        {{item[0]}}
                    </div>
                </div>
            </div>


            <div class="mount">
                <p class="selText">数量</p>
                <van-stepper v-model="tagSelectedMount" />
            </div>


        </div>


        <!--    //商品参数弹出-->
        <van-cell title="商品参数" is-link @click="showPopup()"/>
        <van-popup round
                   v-model="show"
                   position="bottom"
                   :style="{ height: '50%' }"
                   @close="onClose"
        >
            <div class="chart">
                <div class="chartLine" v-for="(item,index) in detailJson.Paras" :key="index">
                    <div class="proName">{{item[0]}}</div>
                    <div class="proValue">{{item[1]}}</div>
                </div>
            </div>
        </van-popup>

        <!--    //商品详情小字-->
        <div class="detailText">
            <van-tag class="detailTag" round type="primary">商品详情</van-tag>
        </div>


        <!--    详情图片box-->
        <div class="imgBox">
            <img class="detailImg" v-for="(item,index) in detailJson.DIs" :key="index"
                 :src="URL + '/products/' + detailJson.ID +'/DI/' + item.name"
                 :style="{height: scrWidth/item.ratio + 'px'}"/>
        </div>

        <!--    底部购物功能区-->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot/>
            <van-goods-action-icon @click="toCart"
                                   icon="cart-o" text="购物车"
                                   :info="cartMount==0?null:cartMount"/>
            <van-goods-action-button text="加入购物车" type="warning" @click="addToCart"/>
            <van-goods-action-button text="立即购买" type="danger" @click="nowBuy"/>
        </van-goods-action>

        <div class="lastTip">亲！没了油！^-^</div>

        <van-toast id="van-toast"/>

    </div>
</template>


<script>
    import Vue from 'vue';
    import {Swipe, SwipeItem, Toast} from 'vant';
    import {Tag} from 'vant';
    import {Cell} from 'vant';


    import {Popup} from 'vant';

    Vue.use(Popup);
    import {Stepper} from 'vant';

    Vue.use(Stepper);
    import {GoodsAction, GoodsActionIcon, GoodsActionButton} from 'vant';

    Vue.use(GoodsAction);
    Vue.use(GoodsActionButton);
    Vue.use(GoodsActionIcon);
    Vue.use(Cell);


    import {NoticeBar} from 'vant';

    Vue.use(NoticeBar);
    Vue.use(Tag);

    Vue.use(Swipe);
    Vue.use(SwipeItem);
    Vue.use(Toast);

    export default {

        beforeMount: function () {
            Toast.loading({
                mask: true,
                duration: 0,
                message: '加载中...'
            });
            this.ID = this.$route.query.ID;
            this.BIratio = 1;
            this.scrWidth = document.body.clientWidth;
            this.show = false;
            this.detailJson = {BIs: null};
            this.tagSelected = null;
            this.tagSelectedName = '';
            this.tagSelectedMount = 1;
            this.tagSelectedSinglePrice = 0;
            this.tagSelectedOrSinglePrice = 0;
            this.cartMount = this.$store.state.cart.length;

            console.log('当前ID为:', this.ID);


            this.$axios.get('http://43.226.148.67:5000/getproduct?ID=' + this.ID)
                .then(res => {
                    console.log('【发起网络请求成功！】', res.data);
                    this.detailJson = res.data;
                    this.BIratio = this.detailJson.BIratio;
                    this.swiWidth = this.scrWidth / this.detailJson.BIratio;
                    this.tagSelected = 0;
                    this.tagSelectedName = res.data.TypeandPrice[0][0];
                    this.tagSelectedSinglePrice = this.detailJson.TypeandPrice[0][1];
                    this.tagSelectedOrSinglePrice = this.detailJson.TypeandPrice[0][2];
                    Toast.clear();
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        },
        onShow: function () {
            console.log('onShow');
            this.cartMount = this.$store.state.cart.length;
        },

        data() {
            return {
                ID: null,
                scrWidth: 20,//屏幕原始尺寸
                BIratio: 1,
                URL: 'http://43.226.148.67:5000/',
                show: false,//产品参数是否显示
                detailJson: {BIs:null},//产品完整Json数据
                tagSelected: null,
                tagSelectedName: '',
                tagSelectedMount: 1,
                tagSelectedSinglePrice: 0,
                tagSelectedOrSinglePrice: 0,
                cartMount: 0,
            }

        },

        methods: {
            showPopup: function () {
                this.show = true;
            },
            onClose: function () {
                this.show = false;
            },
            nowBuy: function () {
                console.log(this);
                this.addToCart();
                this.toCart();
            },
            toCart: function(){
                console.log('点击了购物车按钮！',this.$router);
                this.$router.push('/pages/cart/main');
            },
            tagSelect: function (i) {
                this.tagSelected = i;
                this.tagSelectedName = this.detailJson.TypeandPrice[this.tagSelected][0];
                this.tagSelectedSinglePrice = this.detailJson.TypeandPrice[this.tagSelected][1];
                this.tagSelectedOrSinglePrice = this.detailJson.TypeandPrice[this.tagSelected][2];
                console.log('当前选择的是', this.detailJson.TypeandPrice[this.tagSelected]);
            },
            // mountChange: function (event) {
            //     this.tagSelectedMount = event.mp.detail;
            // },
            addToCart: function () {
                let productItem = {
                    Img: this.detailJson.BIs[0],
                    ID: this.ID,
                    Name: this.detailJson.Name,
                    Type: this.tagSelected,
                    TypeName: this.tagSelectedName,
                    TypeSinglePrice: this.tagSelectedSinglePrice,
                    TypeOrSinglePrice: this.tagSelectedOrSinglePrice,
                    Mount: this.tagSelectedMount,
                    TPrice: Math.floor(this.tagSelectedMount * this.tagSelectedSinglePrice *100)/100,
                    TOrPrice: Math.floor(this.tagSelectedMount * this.tagSelectedOrSinglePrice *100)/100,
                };
                this.$store.dispatch('addToCart', productItem);
                this.cartMount++;
                Toast.success({
                    duration: 1000,       // 持续展示 toast
                    message: '加入成功!',
                });
                console.log(this.$store.state);
            }
        },

    }
</script>

<style>
    body {
        margin: 0;
        padding: 0;
    }

    .Dswiper {
        width: 100%;
        position: relative;
    }

    .DswiperItem {
        width: 100%;
        height: 100%;
    }

    .priceText {
        width: 100%;
        height: 35px;
        margin-top: 5px;
        /*background-color: lime;*/
        padding-left: 10px;
    }

    .price {
        font-size: 25px;
        display: inline-block;
        margin-right: 10px;
        color: #ff702d;
    }

    .orprice {
        font-size: 15px;
        text-decoration: line-through;
        color: #aaaaaa;
    }

    .title {
        font-size: 18px;
        padding: 0 20px 0 20px;
        margin-bottom: 5px;
    }

    .tag {
        margin: 5px;
        display: inline-block;
    }

    .select {
        margin: 0 auto;
        padding-left: 20px;
        width: 99%;
        /*height: 320rpx;*/
        /*background-color: #d9ff77;*/
        border-top: 1px solid rgba(154, 154, 154, 0.2);
        border-bottom: 1px solid rgba(154, 154, 154, 0.2);
        overflow: hidden;
    }

    .selText {
        display: inline-block;
        font-size: 13px;
        color: #424242;
        width: 50px;
        float: left;
        margin-top: 5px;
        /*background-color: peachpuff;*/
    }

    .selected {
        /*background-color: peachpuff;*/
    }

    .selectedInfo {
        display: inline-block;
        font-size: 12px;
        margin-left: 10px;
        top: 4px;
        position: relative;
    }

    .product {
        width: 100%;
        margin-top: 10px;
        display: block;
        background-color: white;
    }

    .chanpin {
        /*height: 200 rpx;*/
    }

    .proType {
        float: left;
        width: 250px;
        /*height: 200rpx;*/
        /*background-color: darkblue;*/
    }

    .proTag {
        padding: 2px;
        padding-left: 8px;
        padding-right: 8px;
        display: inline-block;
        border-radius: 3px;
        border: 1px solid rgba(154, 154, 154, 0.71);
        margin: 5px;
        font-size: 13px;
    }

    .proTagSelected {
        background-color: #07c160;
        color: white;
    }

    .mount {
        height: 35px;
        display: block;
        float: left;
        margin-top: 10px;
        width: 100%;
        /*background-color: khaki;*/
    }

    .detailText {
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
    }

    .imgBox {
        width: 100%;
    }

    .detailImg {
        width: 100%;
        /*height: 740rpx;*/
        margin: 0;
        padding: 0;
        display: block;
    }

    .lastTip {
        width: 100%;
        height: 48px;
        text-align: center;
    }

    .chart {
        /*background-color: coral;*/
        margin: 15%;
        width: 70%;
        /*height: 70%;*/
        border-radius: 25px;
        border: 1px solid #abaaa2;
        overflow: hidden;
    }

    .chartLine {
        width: 100%;
        height: 40px;
        border: 1px solid rgba(154, 154, 154, 0.45);
        border-right: none;
        border-left: none;
        border-top: none;
    }

    .proName {
        width: 30%;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        text-align: right;
        padding-right: 10px;
        border: 1px solid #9a9a9a;
        border-bottom: none;
        border-left: none;
        border-top: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .proValue {
        width: 60%;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        text-align: left;
        padding-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        /*background-color: darkslategray;*/
    }

    .noticeBar {
        margin-top: 5px;
    }
</style>
